<template>
  <div class="container">
    <!-- 顶部导航栏 -->
    <van-nav-bar fixed>
      <!-- 导航栏左侧logo -->
      <template #left>
        <div class="logo"></div>
      </template>
      <!-- 导航栏右侧搜索按钮 -->
      <template #right>
        <van-button
          round
          class="search-btn"
          size="small"
          icon="search"
          @click="$router.push({ path: '/search' })"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 标签页 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab :key="item.id" v-for="item in channelList" :title="item.name">
        <div v-for="v in 50" :key="v"></div>
      </van-tab>

      <!--  下拉刷新-->
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 上拉list列表 -->
        <van-list
          v-model="loading"
          :3="finished"
          finished-text="已经到底了呢..."
          @load="onLoad"
        >
          <van-cell
            v-for="(item, index) in list"
            :key="index"
            :title="item.title"
            @click="
              $router.push({ path: '/details', query: { id: item.art_id } })
            "
          >
            <!-- 具名插槽  -->
            <template #label>
              <!-- grid宫格显示图片 -->
              <van-grid :column-num="item.cover.type" :border="false">
                <van-grid-item
                  v-for="(img, index) in item.cover.images"
                  :key="index"
                >
                  <van-image lazy-load :src="img" />
                </van-grid-item>
              </van-grid>
              <!-- 显示文本信息 -->
              <div>
                <span>{{ item.aut_name }}</span>
                <span>评论：{{ item.comm_count }}</span>
                <span>{{ item.pubdate | fromNow }}</span>
              </div>
            </template>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </van-tabs>
  </div>
</template>

<script>
// 引入获取频道列表接口
import { getChannels, getArticles } from './home.js'
//导入moment
import moment from 'moment'
// 设置语言
moment.locale('zh-cn')
export default {
  name: 'home',
  data () {
    return {
      active: 0, //tab栏
      channelList: [], //频道列表
      list: [], //文章列表
      loading: false, //加载状态, 触底后自定变为true，此时执行onLoad逻辑
      finished: false, //是否加载完毕 false:继续加载 true：触底后就不加载了
      isLoading: false, // 下拉刷新,拉后这个值自动为true
      timestamp: null //  时间戳
    }
  },
  created () {},
  methods: {
    // 上拉加载更多
    async onLoad () {
      // console.log(this.channelList)
      // if (this.channelList.length < 1) {
      //   return
      // }
      if (!this.timestamp) {
        // 如果时间戳为null  就设置当前时间戳
        this.timestamp = Date.now()
      }

      let res1 = await getChannels()
      this.channelList = res1.data.data.channels
      // 1.加载数据
      let res2 = await getArticles({
        channel_id: this.channelList[this.active].id,
        timestamp: this.timestamp
      })
      // 将服务器返回的数据添加到list数组中
      this.list.push(...res2.data.data.results)
      // 拿到服务器返回的时间戳
      this.timestamp = res2.data.data.pre_timestamp
      // 2.加载状态结束
      this.loading = false
    },
    // 下拉刷新
    onRefresh () {
      // 继续加载信息 （保证刷新之后可以正常上拉加载）
      this.finished = false
      // 清空列表信息
      this.list = []
      // 设置上拉加载更多状为true 开启底部加载中动画
      this.loading = true
      // 触发上拉加载更多事件 重新加载数据
      this.onLoad()
      // 关闭上拉刷新动画
      this.isLoading = false
    },
    tabClick () {
      // 清空数据
      this.list = []
      //设置loading状态为true
      this.loading = true
      // 调用onLoad事件
      this.onLoad()
      // 继续加载内容
      this.finished = false
    }
  },
  //过滤器
  filters: {
    fromNow (value) {
      return moment(value).fromNow()
    }
  }
}
</script>
<style lang="less">
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding-top: 46px;
  padding-bottom: 50px;
  overflow: hidden;
  .van-nav-bar {
    background-color: #3296fa;
  }

  // logo区域
  .logo {
    background: url('~@/assets/logo.png') no-repeat;
    background-size: cover;
    width: 100px;
    height: 30px;
  }
  // 搜索按钮
  .search-btn {
    background-color: #5babfb;
    width: 100px;
    font-size: 14px;
    border: none;
    .van-icon {
      color: #fff;
    }
    .van-button__text {
      color: #fff;
    }
  }
  .van-tabs {
    height: 100%;
    padding-top: 44px;
    box-sizing: border-box;
    // tab栏标题
    .van-tabs__wrap {
      position: fixed;
      left: 0;
      right: 0;
      top: 46px;
      z-index: 1000;
    }
    // tab栏内容区域
    .van-tabs__content {
      overflow-y: auto;
      height: 100%;
    }
    .van-cell__label span {
      padding-right: 15px;
    }
  }
}
</style>
